<!-- 界面显示字段 -->
<template>
  <div class="tab1">
    <!-- 按纽栏组件 -->
    <div class="button-group">
      <a-button type="primary" icon="export" @click="tab1Click('lead')" class="icon-button">导入</a-button>
      <a-button type="primary" icon="plus" @click="tab1Click('add')" class="icon-button">新增</a-button>
      <a-button icon="edit" @click="tab1Click('edit')" class="icon-button">编辑</a-button>
      <a-button icon="delete" @click="tab1Click('del')" class="icon-button">删除</a-button>
      <a-button icon="sync" @click="tab1Click('reset')" class="icon-button">重置</a-button>
      <a-button icon="arrow-up" @click="tab1Click('up')" class="icon-button">上移</a-button>
      <a-button icon="arrow-down" @click="tab1Click('down')" class="icon-button">下移</a-button>
    </div>
    <!-- 界面显示字段表格 -->
    <el-table
      :data="tab1TableData"
      highlight-current-row
      border
      height="calc(100% - 42px)"
      :row-style="{height:'40px'}"
      :cell-style="{padding:'0px'}"
      :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
      style="width: 100%">
      <el-table-column
        type="selection"
        width="50">
      </el-table-column>
      <slot v-for="(item,index) in tab1Columns">
        <el-table-column
          v-if="item.field!=='DDM_IsDisplay' && item.field!=='DDM_IsSearable'"
          :key="index"
          :property="item.field"
          :label="item.title"
          :width="item.width"
          show-overflow-tooltip
          sortable>
        </el-table-column>
        <el-table-column
          v-if="item.field==='DDM_IsDisplay'"
          :key="index"
          :property="item.field"
          :label="item.title"
          :width="item.width">
          <template slot-scope="scope">
            <a-checkbox :checked="scope.row.DDM_IsDisplay"></a-checkbox>
          </template>
        </el-table-column>
        <el-table-column
          v-if="item.field==='DDM_IsSearable'"
          :key="index"
          :property="item.field"
          :label="item.title"
          :width="item.width">
          <template slot-scope="scope">
            <a-checkbox :checked="scope.row.DDM_IsSearable"></a-checkbox>
          </template>
        </el-table-column>
      </slot>
    </el-table>

    <!-- 界面显示字段弹框 -->
    <a-modal
      :maskClosable="false"
      :title="modalTitle"
      v-model="dialogFormVisible"
      @ok="handleOk">
      <a-form
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        :form="form">
        <a-form-item label="数据表字段">
          <a-select v-decorator="[ 'Field_Name', {rules: [{ required: true, message: '请选择数据表字段!' }]} ]">
            <a-select-option value="ID">ID</a-select-option>
            <a-select-option value="所属门类">所属门类</a-select-option>
            <a-select-option value="状态">状态</a-select-option>
            <a-select-option value="锁标志">锁标志</a-select-option>
            <a-select-option value="保管期限">保管期限</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="中文显示名称">
          <a-input v-decorator="[ 'DDM_CNName', {rules: [{ required: true, message: '请输入中文显示名称!' }]} ]" />
        </a-form-item>
        <a-form-item label="顺序号" >
          <a-input type="number" v-decorator="[ 'DDM_Order' ]" />
        </a-form-item>
        <a-form-item label="显示长度">
          <a-input type="number" v-decorator="[ 'DDM_DisplayWidth' ]" />
        </a-form-item>
        <a-form-item label="是否显示">
          <a-checkbox size="small" v-decorator="[ 'DDM_IsDisplay', { valuePropName: 'checked', initialValue: true } ]" />
        </a-form-item>
        <a-form-item label="是否可搜索">
          <a-checkbox size="small" v-decorator="[ 'DDM_IsSearable', { valuePropName: 'checked', initialValue: true } ]" />
        </a-form-item>
        <a-form-item label="指定专用字段名">
          <a-select v-decorator="[ 'My_DisplayFieldName' ]">
            <a-select-option value="ID">ID</a-select-option>
            <a-select-option value="所属门类">所属门类</a-select-option>
            <a-select-option value="状态">状态</a-select-option>
            <a-select-option value="锁标志">锁标志</a-select-option>
            <a-select-option value="保管期限">保管期限</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="指定专用字段值">
          <a-input v-decorator="[ 'My_DisplayFieldValue' ]" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: '',
  components: {
  },
  data () {
    return {
      tab1TableData: [
        {
          DDM_Order: 1,
          Field_Name: 'ID',
          CN_name: 'ID',
          DDM_CNName: 'ID',
          DDM_DisplayWidth: '100',
          DDM_IsDisplay: false,
          DDM_IsSearable: false,
          My_DisplayFieldName: '',
          My_DisplayFieldValue: ''
        },
        {
          DDM_Order: 2,
          Field_Name: 'Name',
          CN_name: '姓名',
          DDM_CNName: '姓名',
          DDM_DisplayWidth: '100',
          DDM_IsDisplay: true,
          DDM_IsSearable: false,
          My_DisplayFieldName: '',
          My_DisplayFieldValue: ''
        },
        {
          DDM_Order: 3,
          Field_Name: 'BGQXdata',
          CN_name: '保管期限',
          DDM_CNName: '保管期限',
          DDM_DisplayWidth: '150',
          DDM_IsDisplay: true,
          DDM_IsSearable: true,
          My_DisplayFieldName: '',
          My_DisplayFieldValue: ''
        },
        {
          DDM_Order: 4,
          Field_Name: 'Remark',
          CN_name: '备注',
          DDM_CNName: '备注',
          DDM_DisplayWidth: '100',
          DDM_IsDisplay: true,
          DDM_IsSearable: false,
          My_DisplayFieldName: '',
          My_DisplayFieldValue: ''
        }
      ],
      tab1Columns: [
        {
          title: '顺序号',
          field: 'DDM_Order'
        },
        {
          title: '数据表字段',
          field: 'Field_Name'
        },
        {
          title: '数据表字段名',
          field: 'CN_name'
        },
        {
          title: '自定义字段名',
          field: 'DDM_CNName'
        },
        {
          title: '显示长度',
          field: 'DDM_DisplayWidth'
        },
        {
          title: '是否显示',
          field: 'DDM_IsDisplay'
        },
        {
          title: '是否可搜索',
          field: 'DDM_IsSearable'
        },
        {
          title: '指定专用字段名',
          field: 'My_DisplayFieldName'
        },
        {
          title: '指定专用字段值',
          field: 'My_DisplayFieldValue'
        }
      ],
      modalTitle: '',
      dialogFormVisible: false,
      form: this.$form.createForm(this)
    }
  },
  created () {},
  mounted () {},
  methods: {
    tab1Click (val) {
      switch (val) {
        case 'lead':
          console.log('导入')
          break
        case 'add':
          this.modalTitle = '新增'
          this.dialogFormVisible = true
          this.form.resetFields() // 表单清空
          break
        case 'edit':
          this.modalTitle = '编辑'
          this.dialogFormVisible = true
          break
        case 'del':
          var this_ = this
          this.$confirm({
            title: '提示',
            content: '此操作将永久删除该文件, 是否继续?',
            okText: '确认',
            cancelText: '取消',
            onOk () {
              this_.$message.success('删除成功')
            }
          })
          break
        case 'reset':
          console.log('重置')
          break
        case 'up':
          console.log('上移')
          break
        case 'down':
          console.log('下移')
          break
        default:
          break
      }
    },
    handleOk () {}
  }
}
</script>

<style lang="less" scoped>
.tab1 {
  height: 100%;
  padding: 15px;
  .button-group {
    margin-bottom: 10px;
  }
}
</style>
